<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .parent{border:1px solid black;}
    .child{display: inline-block;width: 50px;}
    .red{background: #f00;}
    .blue{background: blue;}
    .pink{background: pink;}
    .grey{background: #ccc;}
</style>
<body>
<!--水平列表的底部对齐-->
<!--如图所示，一个水平排列的列表，每项高度都未知，但要求底部对齐，有哪些方法可以解决呢？-->

<!--想不出解决方案的同学也可以说说实现思路，或者可以说说别人的方案对不对好不好，有什么优点和缺点等。-->
<div class="parent">
    <div class="child red">
        <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    </div>

    <div class="child blue">
        <p>试测试测试测试测试测试测试测试测试测</p>
    </div>

    <div class="child pink">
        <p>试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测</p>
    </div>
    <div class="child grey">
        <p>试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测</p>
    </div>
</div>
</body>
</html>